<template>
  <el-form ref="formRef" :model="form" labelWidth="120px" label-suffix="：">
    <el-form-item label="节点名称">
      <el-input v-model="form.nodeName"></el-input>
    </el-form-item>
    <el-form-item label="节点ID">
      <el-input v-model="form.typeConcatName" disabled></el-input>
    </el-form-item>
    <el-form-item label="字段">
      <div style="margin-bottom: 10px;">
        <el-button
            type="primary"
            size="small"
            @click="addField"
        >新增字段</el-button>
        <el-button
            type="danger"
            size="small"
            @click="batchDelete"
            :disabled="selectedRows.length === 0"
        >删除选中</el-button>
      </div>
      <el-table :data="form.fields.field" style="width: 100%" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="30"/>
        <el-table-column prop="name" label="名称" width="120">
          <template #default="scope">
            <el-input v-model="scope.row.name" placeholder="请输入名称"></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="path" label="路径" width="300">
          <template #default="scope">
            <el-input v-model="scope.row.path" placeholder="请输入路径"></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="type" label="类型" width="120">
          <template #default="scope">
            <el-select v-model="scope.row.type" placeholder="请选择类型">
              <el-option label="Integer" value="Integer"></el-option>
              <el-option label="String" value="String"></el-option>
            </el-select>
          </template>
        </el-table-column>
<!--        <el-table-column prop="format" label="格式" width="120">-->
<!--          <template #default="scope">-->
<!--            <el-input v-model="scope.row.format" placeholder="请输入格式"></el-input>-->
<!--          </template>-->
<!--        </el-table-column>-->
<!--        <el-table-column prop="length" label="长度" width="120">-->
<!--          <template #default="scope">-->
<!--            <el-input v-model="scope.row.length" placeholder="请输入长度"></el-input>-->
<!--          </template>-->
<!--        </el-table-column>-->
<!--        <el-table-column prop="precision" label="精度" width="120">-->
<!--          <template #default="scope">-->
<!--            <el-input v-model="scope.row.precision" placeholder="请输入精度"></el-input>-->
<!--          </template>-->
<!--        </el-table-column>-->
<!--        <el-table-column prop="currency" label="货币" width="120">-->
<!--          <template #default="scope">-->
<!--            <el-input v-model="scope.row.currency" placeholder="请输入货币"></el-input>-->
<!--          </template>-->
<!--        </el-table-column>-->
<!--        <el-table-column prop="decimal" label="十进制" width="120">-->
<!--          <template #default="scope">-->
<!--            <el-input v-model="scope.row.decimal" placeholder="请输入十进制"></el-input>-->
<!--          </template>-->
<!--        </el-table-column>-->
<!--        <el-table-column prop="group" label="组" width="120">-->
<!--          <template #default="scope">-->
<!--            <el-input v-model="scope.row.group" placeholder="请输入组"></el-input>-->
<!--          </template>-->
<!--        </el-table-column>-->
<!--        <el-table-column prop="trim" label="去除空字符" width="100">-->
<!--          <template #default="scope">-->
<!--            <el-switch v-model="scope.row.trim" active-value="Y" inactive-value="N"></el-switch>-->
<!--          </template>-->
<!--        </el-table-column>-->
        <el-table-column label="操作" width="80">
          <template #default="scope">
            <el-button
                type="danger"
                size="small"
                @click="deleteField(scope.$index)"
                :disabled="form.fields.field.length === 1"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-form-item>
    <el-form-item label="限制">
      <el-input-number v-model="form.limit"></el-input-number>
    </el-form-item>
    <el-form-item label="IsInFields">
      <el-switch v-model="form.IsInFields" active-value="Y" inactive-value="N"></el-switch>
    </el-form-item>
    <el-form-item label="IsAFile">
      <el-switch v-model="form.IsAFile" active-value="Y" inactive-value="N"></el-switch>
    </el-form-item>
    <el-form-item label="valueField">
      <el-input v-model="form.valueField"></el-input>
    </el-form-item>
<!--    <el-form-item label="备注">-->
<!--      <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"/>-->
<!--    </el-form-item>-->


  </el-form>
  <dialog-footer @ok="submitForm" @cancel="cancel"/>

</template>

<script setup>
import {defineComponent, ref, onMounted, reactive, watch} from 'vue';
import {flowServiceStore} from '@data/store/flow';

const flowCount = flowServiceStore();
import {storeToRefs} from 'pinia';
import {ElMessage} from "element-plus";

const {flowData} = storeToRefs(flowCount);

defineComponent({
  name: 'JsonInput',
});
const props = defineProps({
  detailObject: {
    type: Object,
    default: () => {
    },
  },
})

const form = reactive({
  nodeName: '',
  name: '',
  type: 'JsonInput',
  distribute: 'Y',
  copies: 1,
  fields: {
    field: [],
  },
  limit: 0,
  IsInFields: 'Y',
  IsAFile: 'N',
  valueField: '',

  GUI: {
    xloc: 1,
    yloc: 1,
    draw: 'Y'
  }
});


const emit = defineEmits(['cancel']);

onMounted(() => {
  console.log(flowData.value[props.detailObject.id])
  form.nodeName = flowData.value[props.detailObject.id]?.nodeName || props.detailObject.data.label;
  // form.remark = flowData.value[props.detailObject.id]?.remark || '';
  form.limit = flowData.value[props.detailObject.id]?.limit || 0;
  form.IsInFields = flowData.value[props.detailObject.id]?.IsInFields || 'Y';
  form.IsAFile = flowData.value[props.detailObject.id]?.IsAFile || 'N';
  form.valueField = flowData.value[props.detailObject.id]?.valueField || 'result';
  form.fields = flowData.value[props.detailObject.id]?.fields || {
    field: [
      {
        name: "id",
        path: "$.data.userList[*].id",
        type: "Integer"
      },
      {
        name: "age",
        path: "$.data.userList[*].age",
        type: "Integer"
      },
      {
        name: "name",
        path: "$.data.userList[*].name",
        type: "String"
      }
    ]
  }
  form.name = props.detailObject.id;
  form.typeConcatName = `${props.detailObject.id}(${form.type}-${props.detailObject.id})`;

  form.distribute = flowData.value[props.detailObject.id]?.distribute || 'Y';

})

const selectedRows = ref([])
const addField = () => {
  form.fields.field.push({
    name: '',
    path: '',
    type: '',
    format: '',
    length: '',
    precision: '',
    currency: '',
    decimal: '',
    group: '',
    trim: '',
  });
}
// 处理选择变化
const handleSelectionChange = (val) => {
  selectedRows.value = val
}
// 批量删除方法
const batchDelete = () => {
  if (selectedRows.value.length === 0) return
  // 检查是否只剩一个
  if (form.fields.field.length === 1) {
    ElMessage.warning('至少需要保留一个字段')
    return
  }
  // 获取选中项的索引
  const indexes = selectedRows.value.map(row =>
      form.fields.field.indexOf(row)
  ).sort((a,b) => b - a) // 倒序排列避免删除错位
  // 执行删除
  indexes.forEach(index => {
    if (form.fields.field.length > 1) {
      form.fields.field.splice(index, 1)
    }
  })
  // 清空选中
  selectedRows.value = []
}
// 修改删除方法（已存在的方法需要修改）
const deleteField = (index) => {
  if (form.fields.field.length > 1) {
    form.fields.field.splice(index, 1);
  } else {
    ElMessage.warning('至少需要保留一个字段');
  }
}

const submitForm = () => {
  form.fields.field.forEach(fieldItem => {
    form.fieldList.push(fieldItem);
  });
  flowCount.setFlowData(
      {
          ...flowData.value,
          [props.detailObject.id]: {
              ...form,
              name: `${form.type}-${form.name}`,
          }
      }
  )
  // 触发数据更新事件
  // emit('update-data', {
  //   id: props.detailObject.id,
  //   data: form
  // });
  console.log("flowData",flowData.value);
  emit('cancel');

}
const cancel = () => {
  emit('cancel');
}

const toReader = () => {

}

const parseSql = () => {
}

</script>

<style>

</style>